<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <img src="./imgs/ed.png"><br>
        <img src="./imgs/null-f01ba8d0515a857.jpg"><br>
        <img src="./imgs/OQINET[OF(P1B4~X579(LYL.png">
    </div>

    <div style="margin-top: 900px;">
        <img src="./imgs/ed.png" data-src="./imgs/OQINET[OF(P1B4~X579(LYL.png">
        <img src="./imgs/ed.png" data-src="./imgs/OQINET[OF(P1B4~X579(LYL.png">
        <img src="./imgs/ed.png" data-src="./imgs/OQINET[OF(P1B4~X579(LYL.png">
        <img src="./imgs/ed.png" data-src="./imgs/OQINET[OF(P1B4~X579(LYL.png">
        <img src="./imgs/ed.png" data-src="./imgs/OQINET[OF(P1B4~X579(LYL.png">
    </div>
</body>
<script>
    function lazyload() {
        var imagesList = document.getElementsByTagName('img');  // 获取所有图片列表
        var length = imagesList.length; // 一共有多少张图片
        var n = 0; // n用来保存之前已经加载过的多少张图片，就可减少下面遍历的次数
        return function () {
            var clientHeight = document.documentElement.clientHeight;  // 浏览器可视区域的高度
            var scrollTop = document.documentElement.scrollTop;  // 页面被遮挡的高度
            for (var i = n; i < length; i++) {
                if (imagesList[i].offsetTop < clientHeight + scrollTop) { // offsetTop获取图片顶部相对于页面顶部的距离，当它小于浏览器可视区域的高度和页面被遮挡的高度之和时，加载图片
                    if (imagesList[i].getAttribute('src') === './imgs/ed.png') { //当该img的路径为'./loading.png'时才把图片的真实路径赋值给src
                        imagesList[i].src = imagesList[i].getAttribute('data-src');
                    }
                    n = n + 1;
                } else {
                    break;
                }
            }
        }
    }
    var a = lazyload();
    a();
    window.addEventListener('scroll', a, false); // 监听页面滚动事件，执行lazyload函数。

</script>

</html>